<template>
	<div class="person">
        <h2>汽车信息：一辆{{ car.brand }}车，它的颜色是：{{ car.option.color }}色, 价格是: {{ car.price }}</h2>
		<h2>汽车信息2：一辆{{ car2.brand }}车，它的颜色是：{{ car2.option.color }}色, 价格是: {{ car2.price }}</h2>
        <button @click="changeCarPrice">修改汽车价格</button>
        <button @click="changeColor">变换汽车颜色</button>
		<button @click="changePrice">变换汽车价格</button>
		<button @click="changeCarPrice2">修改汽车价2格</button>
        <button @click="changeColor2">变换汽车颜色2</button>
		<button @click="changePrice2">变换汽车价格2</button>
        <br>
		<h2>姓名:{{ person2.name }}, 年龄:{{ person2.age }}</h2>
		<button @click="changeAge()">修改年龄</button>
    </div>
</template>


<script setup lang="ts" name="App">
	import { reactive, toRaw, markRaw } from 'vue';

	
	let car = reactive({
		'brand':'奔驰',
		'option':{
			'color': '红',
			'engine': 'V8'
		},
		'price': 10
	})

	// toRaw将响应式对象解体为普通对象，变为普通对象后便不能进行响应式修改(但修改还是会影响源对象，例如案例中价格增加)
	let car2 = toRaw(car)

	function changeCarPrice() {
		car.brand = '奥迪'
	}

	function changeColor() {
		car.option.color = '黑'
	}

	function changePrice() {
		car.price += 1
	}

	function changeCarPrice2() {
		car2.brand = '奥迪'
	}

	function changeColor2() {
		car2.option.color = '红'
	}

	function changePrice2() {
		car2.price += 1
	}

	// markRaw 标记一个普通对象，使其永远无法生成响应式对象
	let person = markRaw({'name':'张三', 'age':18});
	let person2 = reactive(person);

	function changeAge(){
		person2.age += 1
		// 对象在变化，但是不会触发页面更新
		console.log(person)
		console.log(person2)
	}

</script>

<style>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}

li {
    font-size: 20px;
}
</style>